<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts 横向柱状图滚动</title>
    <!-- 引入 ECharts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        #chart {
            width: 800px;
            height: 400px;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div id="chart"></div>
    <script>
        // 等待文档加载完成
        document.addEventListener('DOMContentLoaded', function () {
            // 初始化图表
            var myChart = echarts.init(document.getElementById('chart'));

            var option = {
                backgroundColor: '#031d33',
                animation: true,
                grid: {
                    top: "5%",
                    bottom: "15%",
                    right: "5%"
                },
                xAxis: {
                    data: ['消防烟感', '摄像机', '环境烟感', '路灯', '地磁'],
                    axisLine: {
                        show: false //隐藏X轴轴线
                    },
                    axisTick: {
                        show: false //隐藏X轴轴线
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(77, 128, 254, 0.2)",
                            width: 2
                        }
                    },
                    axisLabel: {
                        show: true,
                        margin: 14,
                        fontSize: 16,
                        textStyle: {
                            color: "#65D5FF" //X轴文字颜色
                        }
                    }
                },
                yAxis: [
                    {
                        type: "value",
                        gridIndex: 0,
                        min: 0,
                        max: 100,
                        interval: 25,
                        // splitNumber: 4,
                        inverse: true,  // 添加这行实现Y轴倒置
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(77, 128, 254, 0.2)",
                                width: 2
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(77, 128, 254, 0.2)"
                            }
                        },
                        axisLabel: {
                            show: true,
                            margin: 14,
                            fontSize: 16,
                            textStyle: {
                                color: "#65D5FF"
                            }
                        }
                    }
                ],
                series: [
                {
                        name: "外框",
                        type: "bar",
                        barGap: "-100%", // 设置外框粗细
                        data: [100, 100, 100, 100, 100, 100, 100],
                        barWidth: 16,
                        itemStyle: {
                            normal: {
                                color: "rgba(56,73,184,0.4)", // 填充色
                                barBorderRadius: 1, //圆角半径
                                borderWidth: 1,
                                borderColor: "#428bff",
                                label: {
                                    // 标签显示位置
                                    show: false,
                                    position: "top" // insideTop 或者横向的 insideLeft
                                }
                            }
                        },
                        z: 0
                    },
                    {
                        name: "设备在线率",
                        type: "bar",
                        barWidth: 16,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgba(146, 225, 255, 1)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0, 151, 251, 1)"
                                    }
                                ])
                            }
                        },
                        data: [21, 43, 56, 32, 64],
                        z: 10,
                        zlevel: 0
                    },
                    {
                        // 分隔
                        type: "pictorialBar",
                        itemStyle: {
                            normal: {
                                color: "#0F375F"
                            }
                        },
                        symbolRepeat: "fixed",
                        symbolMargin: 4,
                        symbol: "rect",
                        symbolClip: true,
                        symbolSize: [18, 2],
                        symbolPosition: "start",
                        symbolOffset: [1, 1],
                        data: [21, 43, 56, 32, 64],
                        width: 1,
                        z: 0,
                        zlevel: 1
                    },
                    
                ],
                dataZoom: [
                    {
                        type: "slider",
                        show: false,
                        xAxisIndex: [0],
                        endValue: 4,
                        startValue: 0
                    }
                ]
            }

            // 设置图表配置项
            myChart.setOption(option);


            // 自适应窗口大小
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        });
    </script>
</body>

</html>